<template>
  <avue-draggable
    :step="step"
    :width="widgetsWidth"
    :height="widgetsHeight"
    :left="widgetsLeft"
    :top="widgetsTop"
    ref="draggable"
    :index="index"
    :z-index="-1"
    @focus="handleFocus"
    @blur="handleBlur"
  >
    <component :is="type" :value="value" />
  </avue-draggable>
</template>

<script>
import widgetHref from "./html/widgetHref.vue";
import widgetText from "./html/widgetText.vue";
import widgetMarquee from "./html/widgetMarquee.vue";
import widgetTime from "./html/widgetTime.vue";
import widgetImage from "./html/widgetImage.vue";
import widgetSlider from "./html/widgetSlider.vue";
import widgetVideo from "./html/widgetVideo.vue";
import widgetIframe from "./html/widgetIframe.vue";
import widgetTable from "./html/widgetTable.vue";

import widgetBar from "./chart/widgetBar.vue";
import widgetBarCompare from "./chart/widgetBarCompare.vue";
import widgetBarGradient from "./chart/widgetBarGradient.vue";
import widgetBarLine from "./chart/widgetBarLine.vue";
import widgetBarStack from "./chart/widgetBarStack.vue";

import widgetLine from "./chart/widgetLine.vue";
import widgetLineCompare from "./chart/widgetLineCompare.vue";
import widgetLineStack from "./chart/widgetLineStack.vue";

import widgetPie from "./chart/widgetPie.vue";
import widgetPiePercentage from "./chart/widgetPiePercentage.vue";
import widgetPieNightingaleRose from "./chart/widgetPieNightingaleRose";

import widgetFunnel from "./chart/widgetFunnel.vue";
import widgetGauge from "./chart/widgetGauge.vue";

import widgetBorder from "./ornament/widgetBorder.vue";
import widgetDecoration from "./ornament/widgetDecoration.vue";

export default {
  name: "Widget",
  components: {
    widgetHref,
    widgetText,
    widgetMarquee,
    widgetTime,
    widgetImage,
    widgetSlider,
    widgetVideo,
    widgetIframe,
    widgetTable,
    
    widgetBar,
    widgetBarCompare,
    widgetBarGradient,
    widgetBarLine,
    widgetBarStack,
    
    widgetLine,
    widgetLineCompare,
    widgetLineStack,
    
    widgetPie,
    widgetPiePercentage,
    widgetPieNightingaleRose,
    
    widgetFunnel,
    widgetGauge,
    
    widgetBorder,
    widgetDecoration
  },
  model: {
    prop: "value",
    event: "input"
  },
  props: {
    index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引
    type: String,
    bigscreen: Object,
    value: {
      type: [Object],
      default: () => {}
    },
    step: Number
  },
  data() {
    return {
      data: {
        setup: {},
        data: {},
        position: {}
      }
    };
  },
  computed: {
    widgetsWidth() {
      return this.value.position.width;
    },
    widgetsHeight() {
      return this.value.position.height;
    },
    widgetsLeft() {
      return this.value.position.left;
    },
    widgetsTop() {
      return this.value.position.top;
    },
    widgetsZIndex() {
      return this.value.position.zIndex || 1;
    }
  },
  mounted() {
  },
  methods: {
    handleFocus({ index, left, top, width, height }) {},
    handleBlur({ index, left, top, width, height }) {
      this.$emit("onActivated", { index, left, top, width, height });
      this.$refs.draggable.setActive(true);
    }
  }
};
</script>

<style scoped lang="less">
.vue-draggalbe {
  position: absolute;
}
.widget-active {
  cursor: move;
  border: 1px dashed #09f;
  background-color: rgba(115, 170, 229, 0.5);
}
.avue-draggable {
  padding: 0 !important;
}
</style>
